{extend name="public/common"}

{block name="style"}
<link rel="stylesheet" href="/index/css/activity/index.css">
<title>活动列表</title>
<style>
    body{
        background-color: #f5f5f5;
    }
    .content {
        padding-top: 50px;
        color: #999;
        font-size: 1.5rem;
        text-align: center;
    }
    .content>img {
        width: 100%;
        margin-top: 5rem;
    }
    .no-message {
        display: block;
        margin: 0 auto;
    }
    #User {
        width:19vw;
        height:6vw;
        background: rgb(249, 120, 120);
        position: fixed;
        top:4vw;
        right:4vw;
        z-index: 9999;
        border-radius: 8vw;
        text-align: center;
        line-height: 6vw;
        color: #fff;
        font-size: 1.2rem;
    }
</style>
{/block}

{block name="body"}
<!-- -1 删除   0.禁用   1 预报名中 2启动.-->
<div id="app">
    <!--<div @click="ajaxPost" style="height:100px;">支付</div>-->
    <div id="User" @click="jumpToUser()">个人中心</div>
    <div class="active-item" :style="'background-image: url('+ item.front_cover +')'" @click="jumpTo(item.id)" v-for="item in baseInfo">
        <div class="my-icon-flag my-icon-hot" v-if="state(item.status,item.start_time) == 'hot'" ><span>HOT</span></div>
        <div class="my-icon-fillet" v-if="state(item.status,item.start_time) == 'cancel'"><span>活动已取消</span></div>
        <div class="my-icon-fillet" v-if="state(item.status,item.start_time) == 'noSignUp'"><span>报名已结束</span></div>
        <div class="my-icon-fillet" v-if="state(item.status,item.start_time) == 'end'"><span>活动已结束</span></div>
        <div class="my-icon-flag "  v-if="state(item.status,item.start_time) == 'un'" ><span>预</span></div>
        <div class="active-info">
            <div class="active-title"><span>{{item.name}}</span></div>
            <div class="active-time">开始时间：{{item.start_time?item.start_time:'未定' | timeToString}}</div>
        </div>
    </div>
    <div v-if="!baseInfo.length" class="content">
        <img src="/index/images/activity/icon-default.jpg" class="no-message" >
        <span>空荡荡的~</span>
    </div>
</div>
{/block}

{block name="script"}
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    console.log({$list})
    Vue.filter('timeToString', function(time) {
        if(time){
            if(!isNaN(time)){
                if(String(time).length<13){
                    time = time*1000
                }
                var newTime = new Date(time);
                var m = newTime.getMonth()+1,
                        dt=newTime.getDate(),
                        y=newTime.getFullYear();
                if(dt<10){
                    dt='0'+dt;
                }
                if(m<10){
                    m='0'+m;
                }
                return y+'.'+m+'.'+dt
            }else{
                return time
            }

        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            baseInfo:{$list},
            subData:{
                id:'',
                typeid:''
            },
        },
        created(){
            var yu=[],
                    hot=[],
                    end=[],
                    other=[],
                    baseInfo=this.baseInfo,
                    now=Date.parse(new Date())/1000;
            for(var i=0 ;i<baseInfo.length;i++){
                if(baseInfo[i].start_time < now){
                    end.push(baseInfo[i])
                }else{
                    if(baseInfo[i].status == 2){
                        hot.push(baseInfo[i])
                    }else if(baseInfo[i].status == 1){
                        yu.push(baseInfo[i])
                    }else{
                        other.push(baseInfo[i])
                    }
                }
            }
            this.baseInfo = hot.concat(yu.concat(end.concat(other)));
        },
        methods: {
            ajaxPost(){
                var _this = this;
                _this.subData.id = 1;
                _this.subData.typeid = 1;
                _this.isSubmit = true;
                _this.$http.post('/index/Activity/pay',_this.subData).then(function (res) {
//                    //10 微信支付接口
//                    // 10.1 发起一个支付请求
//                    // 注意：此 Demo 使用 2.7 版本支付接口实现，建议使用此接口时参考微信支付相关最新文档。
//                    var param = res.data.data;
//                    wx.config({
//                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
//                        appId: param.appid, // 必填，公众号的唯一标识
//                        timestamp: param.timestamp, // 必填，生成签名的时间戳
//                        nonceStr: param.nonce_str, // 必填，生成签名的随机串
//                        signature: param.sign,// 必填，调用js签名，
//                        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，这里只写支付的
//                    });
//                    wx.chooseWXPay({
//                        timestamp: param.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
//                        nonceStr: param.nonce_str, // 支付签名随机串，不长于 32 位
//                        package: "prepay_id=" + param.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
//                        signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
//                        paySign: param.sign, // 支付签名
//                        success: function (res) {
//                            if(res.errMsg == "chooseWXPay:ok"){
//                                alert("支付成功");
////                                window.location.href  = "/hims/weixin/pages/Order_ok.html?access_token=" getUrlParam("access_token");
//                            }else{
//                                alert(res.errMsg);
//                            }
//                        },
//                        cancel: function(res){
//                            //alert('取消支付');
//                        }
//                    });
                    var str = res.data.data;
                    function onBridgeReady(){
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId":str.appid,     //公众号名称，由商户传入
                                "timeStamp":"\'"+str.timestamp+"\'",         //时间戳，自1970年以来的秒数
                                "nonceStr":str.nonce_str, //随机串
                                "package":"prepay_id="+str.prepay_id,
                                "signType":"MD5",         //微信签名方式：
                                "paySign":str.sign //微信签名
                            },
                            function(res){
                                if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                            }
                        );
                    }
                    if (typeof WeixinJSBridge == "undefined"){
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    }else{
                        onBridgeReady();
                    }

                })
            },
            state(status ,start,end){
                if(status == 0){
                    return 'cancel'
                }else if(status ==1){
                    return 'un'
                }
                if(start*1000 > Date.parse(new Date())){
                    if(status == 2){
                        return 'hot'
                    }
                }else {
                    if(Date.parse(new Date()) < end*1000){
                        return 'noSignUp'
                    }else{
                        return 'end'
                    }
                }
            },
            jumpTo(id){
                window.location.href = '/index/activity/detail/id/'+id
            },
            jumpToUser(){
                window.location.href = '/index/users/getlist'
            }
        }
    })
</script>
{/block}